<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">生日论命</p>
        </h3>
        <div>
          <div>
            <el-form
              :model="form"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <!-- 姓名 -->
              <el-form-item label="生日：" prop="name">
                <el-date-picker
                  v-model="birthday"
                  @change="dateBir"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 450px"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="语言：" prop="lang">
                <el-radio-group v-model="form.lang">
                  <el-radio label="zh-cn">中文</el-radio>
                  <el-radio label="en-us">英文</el-radio>
                  <el-radio label="zh-tw">繁体</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 太阳时 -->

              <!-- 出生地区 -->
            </el-form>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >立即测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p>
            测试方法：选择您的【公历月日】，点击立即测算，并查看测算结果，请自行体会其中的吉凶指示。
          </p>
          <p style="">
            1.生日论命，《生日书》是依据西洋星座分析写出来的。每个人的诞生，都是上天特别量身订制的，每个人的生日都是一种喜悦的经典。与此同时，每个人的生日都是个迷，星相命理给我们生命的启示，不同的生日都会有不同的命运。生日总有神奇的暗示，凭出生日期的数字测出内在性格和潜在力量。
          </p>
          <p>
            2.正所谓一命二运三风水，四积阴德五读书，六名七相八敬神，九交贵人十修身。平时积善行德，心存善念，必有善行，善念善行，天必佑之。
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="bazi_info" v-if="result != null">
        <div class="base_info">
          <div class="show">
            <span class="l">出生公历:</span>
            <span class="r"
              >{{ result.year }}-{{ result.month }}{{ result.day }}</span
            >
          </div>
          <div class="show">
            <span class="l">生日简介:</span>
            <span class="r">{{ result["简介"] }}</span>
          </div>
          <div class="show">
            <span class="l">静思语:</span>
            <span class="r">{{ result["静思语"] }}</span>
          </div>

          <div class="show">
            <span class="l">优点:</span>
            <span class="r">{{ result["优点"] }}</span>
          </div>
          <div class="show">
            <span class="l">缺点:</span>
            <span class="r">{{ result["缺点"] }}</span>
          </div>
        </div>

        <div class="base_info">
          <div class="details">
            <div class="names">
              <span>生日名人：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["名人"] }}</span>
            </div>
          </div>

          <div class="details">
            <div class="names">
              <span>生日建议：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["建议"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>生日健康：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["健康"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>代表塔罗牌：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["塔罗牌"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>幸运数字和守护星：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["幸运数字和守护星"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>生日论命：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result["详情"] }}</span>
            </div>
          </div>
        </div>
        <div class="yl">
          <span>仅供娱乐！请勿当真</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",

      result: {
        简介: "1月8日 潜力爆发 宫位：魔羯座17度-19度 星座：魔羯座二，本位的土象",
        详情: "1月8日出生的人，似乎注定了会对周遭亲朋好友的生活产生巨大影响。他们不见得是外向或爱表现的人，但是在社交或是私人的聚会时，总是让人觉得他们很重要，因为他们所表现的自我是那么的强烈，让人印象深刻。这天出生的人，不管外表是否突出（很多这天出生的人是貌不惊人，甚至有时是肢体残障），都会传达出无比的坚定，而这就是他们的注册商标。因此，他们会在工作生涯里异军突起，也算是件稀松平常的事。他们似乎能够将每一分能量酝酿储存，然后在某个表现场合或某件作品上，爆发出惊人的能量。这种能够在有限空间或时间里集中能量的作法，正是他们工作的特征，充满十足的爆发力。他们很清楚自己能力所及，或不可及之事，所以，他们很少会去做超乎自己能力的事，也不会作白日梦或是现实世界不可能实践的幻想。别人可能会觉得他们思想前卫，敢于冒别人不敢尝试的危险，但事实上，说他们随遇而安，也许更为贴切。1月8日出生的人对于同事（在工作层面）或是家人、朋友（在个人层面）所认为的理所当然、绝对可以自圆其说的事实，最典型的反应就是冷静地提出质疑。然而，他们之所以会这么做，并不是故意反对或捣蛋，只是因为他们早已小心地状况，而有了不尽相同的结论。不见得每一个1月8日出生的人都有大智慧，但是至少都会很努力地，尽量将自己的能力发挥到极限。在他们的生活里，不停地克服精神和身体上的障碍，是很重要的主题。1月8日出生的人必须学习不要给自己太多压力，对那些不善处理紧张情绪，却拥有充沛精力的人而言，学习让事情轻松一点是当务之急。同时还要能接受、原谅别人，这一点特别重要，因为很多这天出生的人会有“顺我者生，逆我者亡”的态度。如果自以为是神，视他人为蝼蚁，这种自大、自欺就会成为他们的致命伤。",
        幸运数字和守护星:
          "1月8日出生的人，都受到数字8和土星的影响。土星象征着小心、限制和宿命，加上魔羯座的主宰行星也是土星，所以这天出生的人拥有一种特别的力量，当他们运用这种力量的时候，可以发挥深沉、认真、长久的影响力。受数字8主宰的人，通常倾向于缓慢且小心地建立个人生涯，但是，1月8日出生的人却经常异军突起，腾空而降。另外，受数字8主宰的人，虽然本性善良，但表面上会显得冷酷些，与人有距离。",
        健康: "1月8日出生的人必须避免将自己孤立在自我意识里，以为自己的想法和行动永远是对的，而且无懈可击。这天出生的人应该保持社交习惯，永远不要脱离自己的根、生长背景、家人或是朋友。强烈的道德或宗教架构，可以帮助他们不误入歧途。简单的饮食习惯对他们的健康颇有助益，最好不要吃得太丰富。切记要远离容易上瘾的药品，特别是酒精这类麻醉神经的物品。建议每天进行轻度到适量的运动，常到户外走走或做些其他较温和的运动也不错。除此之外，还应该特别注意骨骼状况、身体的姿势及骨骼系统。",
        建议: "千万不要太过得意忘形。和身边的人加深感情的连结，得失之间才能轻松自在。对任何变化保持开谢谢的心境，有时不妨从事一些小冒险，同时别为了成功放弃个人的原创性。",
        名人: "艾维斯普里斯莱(Elvis Presley)美国摇滚歌手“猫王”，同时也是电影演员，以及大众的偶像。生平共录制了45张金唱片，拍了20部电影，享年42岁。当他去世的消息传出，成千上万的歌迷、影迷前往他在孟菲斯的华厦吊唁。",
        塔罗牌:
          "大秘仪塔罗牌的第8张代表“力量”，图牌中画着一位优雅的皇后，正在驯服一头愤怒的狮子。皇后象征女魔法师，可以驾驭不易控制的能量，并代表道德及体能上的优越力量。这张牌正立时，代表个人的魅力以及追求成功的决心；倒立时则暗喻自满和滥权。",
        静思语: "迷失在自我迷宫的人，看似好人，其实是不懂得怎么当一个人。",
        优点: "有趣、风趣、迷人。",
        缺点: "压力过大、过度热中、易犯错。",
        year: "1988",
        month: "1",
        day: "8",
      },
      area: "",
      form: {
        lang: "zh-cn",
        month: "",
        day: "",
        year: "",
      },
    };
  },
  mounted() {},
  methods: {
    padZero(num) {
      return num.toString().padStart(2, "0");
    },
    dateBir(val) {
      console.log(val);
      this.birthday = val;

      var date = new Date(val);

      // 获取各部分时间
      var year = date.getFullYear(); // 年（4位）
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月（补零）
      var day = date.getDate().toString().padStart(2, "0"); // 日（补零）

      this.form.year = year;
      this.form.month = month;
      this.form.day = day;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 这里处理提交逻辑
          if (!this.birthday) {
            this.$message.error("请选择生日");
            return false;
          }

          this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
          let config = {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          };
          this.$axios
            .post(window.config.apiUrl + "/v1/Bazi/shengri", this.form, config)
            .then((res) => {
              if (res.data.errcode == -1) {
                this.$message({
                  type: "warning",
                  message: res.data.errmsg,
                });

                return;
              }

              this.centerDialogVisible = true;
              this.result = res.data.data;
              console.log(this.result);
            });
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bd {
  border: 1px solid #e5e5e5;
}

.cesaun_container {
}

::v-deep .el-card.is-always-shadow {
  box-shadow: none !important;
}

::v-deep .el-card__header {
  padding: 10px 20px !important;
}

.form-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

.form-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  text-align: left;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-radio {
  margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
  width: 100% !important;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog {
  margin-top: 10px !important;
}

.dialog_cesuan {
  margin-top: 0 !important;
  overflow: hidden;

  text {
    user-select: all;
  }

  .bazi_info {
    height: calc(100vh - 100px);
    overflow: auto;

    .base_info {
      margin: 20px;

      .title {
        display: flex;
        padding: 5px;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 8px;
          font-weight: 800;
          font-size: 15px;
        }
      }

      .show {
        margin-top: 15px;

        .l_ {
          font-size: 14px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }

        .l {
          font-size: 15px;
          display: inline-block;
          min-width: 80px;
          font-weight: 800;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-weight: 800;
          background-color: #fff3ef;
          height: 50px;
          line-height: 50px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 10px;
          display: flex;
          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 85%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }
  }
}
</style>